<script setup>

import {ref} from "vue";

const tableData = [
  {
    id: 1,
    factor_id: 1001,
    factor_name: '空调01',
    content: '温度:10℃, 湿度:50%',
    create_time: '2023-12-25 19:00:00'
  },
  {
    id: 2,
    factor_id: 1002,
    factor_name: '电路08',
    content: '电流:10A, 电压:220V',
    create_time: '2023-12-25 19:00:00'
  },
  {
    id: 3,
    factor_id: 1003,
    factor_name: '风扇03',
    content: '转速:1080rpm',
    create_time: '2023-12-25 19:00:00'
  },
  {
    id: 4,
    factor_id: 1004,
    factor_name: '电表09',
    content: '功率:2000kWh',
    create_time: '2023-12-25 19:00:00'
  },
  {
    id: 5,
    factor_id: 1005,
    factor_name: '开关07',
    content: '开启',
    create_time: '2023-12-25 19:00:00'
  },
  {
    id: 6,
    factor_id: 1001,
    factor_name: '空调01',
    content: '温度:10℃, 湿度:50%',
    create_time: '2023-12-25 19:00:00'
  },
  {
    id: 7,
    factor_id: 1002,
    factor_name: '电路08',
    content: '电流:10A, 电压:220V',
    create_time: '2023-12-25 19:00:00'
  },
  {
    id: 8,
    factor_id: 1003,
    factor_name: '风扇03',
    content: '转速:1080rpm',
    create_time: '2023-12-25 19:00:00'
  },
  {
    id: 9,
    factor_id: 1004,
    factor_name: '电表09',
    content: '功率:2000kWh',
    create_time: '2023-12-25 19:00:00'
  },
  {
    id: 10,
    factor_id: 1005,
    factor_name: '开关07',
    content: '开启',
    create_time: '2023-12-25 19:00:00'
  },
  {
    id: 11,
    factor_id: 1001,
    factor_name: '空调01',
    content: '温度:10℃, 湿度:50%',
    create_time: '2023-12-25 19:00:00'
  },
  {
    id: 12,
    factor_id: 1002,
    factor_name: '电路08',
    content: '电流:10A, 电压:220V',
    create_time: '2023-12-25 19:00:00'
  },
  {
    id: 13,
    factor_id: 1003,
    factor_name: '风扇03',
    content: '转速:1080rpm',
    create_time: '2023-12-25 19:00:00'
  },
  {
    id: 14,
    factor_id: 1004,
    factor_name: '电表09',
    content: '功率:2000kWh',
    create_time: '2023-12-25 19:00:00'
  },
  {
    id: 15,
    factor_id: 1005,
    factor_name: '开关07',
    content: '开启',
    create_time: '2023-12-25 19:00:00'
  },
  {
    id: 16,
    factor_id: 1001,
    factor_name: '空调01',
    content: '温度:10℃, 湿度:50%',
    create_time: '2023-12-25 19:00:00'
  },
  {
    id: 17,
    factor_id: 1002,
    factor_name: '电路08',
    content: '电流:10A, 电压:220V',
    create_time: '2023-12-25 19:00:00'
  },
  {
    id: 18,
    factor_id: 1003,
    factor_name: '风扇03',
    content: '转速:1080rpm',
    create_time: '2023-12-25 19:00:00'
  },
  {
    id: 19,
    factor_id: 1004,
    factor_name: '电表09',
    content: '功率:2000kWh',
    create_time: '2023-12-25 19:00:00'
  },
  {
    id: 20,
    factor_id: 1005,
    factor_name: '开关07',
    content: '开启',
    create_time: '2023-12-25 19:00:00'
  }
]


const dataRange = ref([])

const data = reactive({
  queryParams: {
    factorID: "",
    factorName: "",
    content: "",
    creatTime: ""
  }
})

const {queryParams} = toRefs(data)

</script>

<template>
  <div>
    <el-card>
      <div>
        <el-form :model="queryParams" ref="queryRef" style="width: 100%; margin: 10px;">
          <el-row style="column-gap: 16px">
            <el-form-item class="search-short-line">
              <el-input v-model="queryParams.factorID" placeholder="节点ID" clearable></el-input>
            </el-form-item>
            <el-form-item class="search-short-line">
              <el-input v-model="queryParams.factorName" placeholder="节点名" clearable></el-input>
            </el-form-item>
            <el-form-item class="search-short-line">
              <el-input v-model="queryParams.content" placeholder="日志内容" clearable></el-input>
            </el-form-item>
            <el-form-item class="search-long-line">
              <el-date-picker
                  v-model="dataRange"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间">
              </el-date-picker>
            </el-form-item>
          </el-row>
          <el-row>
            <div style="display: flex; justify-content: space-between">
              <el-button
                  style="width: 82px"
                  color="#3951E3"
                  type="primary"
                  icon="Search"
                  @click="handleQuery">
                搜索
              </el-button>
              <el-button
                  style="width: 82px"
                  icon="Refresh"
                  @click="resetQuery">
                重置
              </el-button>
            </div>
          </el-row>
        </el-form>
      </div>

      <div>
        <el-table stripe
                  :data="tableData"
                  :default-sort="{prop:'id', order:'ascending'}"
                  :header-cell-style="{'background': '#F5F7FA', 'height': '45px'}"
                  :cell-style="{'height' : '45px'}"
                  height="550px"
                  table-layout="auto"
                  style="width: 100%;margin: 10px">
          <el-table-column prop="id" label="记录号" width="120"/>
          <el-table-column prop="factor_id" label="节点ID" width="120"/>
          <el-table-column prop="factor_name" label="节点名" width="200"/>
          <el-table-column prop="content" label="内容"/>
          <el-table-column prop="create_time" label="创建时间" width="200"/>
        </el-table>
      </div>
      <div style="margin-top: 14px">
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            style="display: flex; justify-content: right;"
            :disabled="disabled"
            :background="background"
            layout="total, prev, pager, next, jumper"
            :total="200"
            @current-change="handleCurrentChange"
        />
      </div>

    </el-card>
  </div>

</template>

<style scoped lang="scss">

.search-short-line {
  width: 320px;
}

.search-long-line {
  width: 480px;
}

</style>